<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    @import url('https://fonts.googleapis.com/css?family=Bitter');

    * {
        /* border: 1px solid red; */
    }

    :root {
        --font: 'Bitter', serif;
        --title-size: 36px;
        --sub-size: 18px;
    }

    body {
        background: #E5E5E5;
    }

    .title h1 {
        margin: 4px;
        font-family: var(--font);
        font-size: var(--title-size);
        color: #333;
    }

    .title p {
        margin: 4px;
        padding-bottom: 25px;
        font-family: var(--font);
        font-size: var(--sub-size);
        color: #888;
    }

    .container {
        text-align: center;
    }

    .github {
        margin: 40px;
    }

    .progress {
        display: inline-block;
        width: 400px;
        height: 50px;
        margin: 35px;
        border-radius: 20px;
        background: #f9f9f9;
    }

    .bar {
        border-radius: 20px;
        width: 0%;
        height: 100%;
        transition: width;
        transition-duration: 1s;
        transition-timing-function: cubic-bezier(.36, .55, .63, .48);
    }

    .mobile {
        display: none;
    }

    .shadow {
        /* 25 50 */
        box-shadow: 0px 45px 50px rgba(0, 0, 0, 0.25);
    }

    .crosses {
        background-color: #DFDBE5;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='25' viewBox='0 0 40 40'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%239C92AC' fill-opacity='0.4'%3E%3Cpath d='M0 38.59l2.83-2.83 1.41 1.41L1.41 40H0v-1.41zM0 1.4l2.83 2.83 1.41-1.41L1.41 0H0v1.41zM38.59 40l-2.83-2.83 1.41-1.41L40 38.59V40h-1.41zM40 1.41l-2.83 2.83-1.41-1.41L38.59 0H40v1.41zM20 18.6l2.83-2.83 1.41 1.41L21.41 20l2.83 2.83-1.41 1.41L20 21.41l-2.83 2.83-1.41-1.41L18.59 20l-2.83-2.83 1.41-1.41L20 18.59z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    }

    .jupiter {
        background-color: #f395a5;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='52' viewBox='0 0 52 52'%3E%3Cpath fill='%23e6cca5' fill-opacity='0.4' d='M0 17.83V0h17.83a3 3 0 0 1-5.66 2H5.9A5 5 0 0 1 2 5.9v6.27a3 3 0 0 1-2 5.66zm0 18.34a3 3 0 0 1 2 5.66v6.27A5 5 0 0 1 5.9 52h6.27a3 3 0 0 1 5.66 0H0V36.17zM36.17 52a
</style>

<body>
    <div class="container">
        <div class="github">
            <div class="title">
                <h1>Bars</h1>
                <p class="desktop">Hover the bars to fill'em (:</p>
                <p class="mobile">Touch the bars to fill'em (:</p>
            </div>
            <a class="github-button" href=" " data-size="large" data-show-count="true"
                aria-label="Star lucagez/bars on GitHub">Star</a>
        </div>
        <div class="progress">
            <div class="bar shadow overlap"></div>
        </div>
        <div class="progress">
            <div class="bar shadow leaf"></div>
        </div>
        <div class="progress">
            <div class="bar shadow bars"></div>
        </div>
        <div class="progress">
            <div class="bar shadow lines"></div>
        </div>
        <div class="progress">
            <div class="bar shadow wiggle"></div>
        </div>
        <div class="progress">
            <div class="bar shadow dots"></div>
        </div>
        <div class="progress">
            <div class="bar shadow circuit"></div>
        </div>
        <div class="progress">
            <div class="bar shadow aztec"></div>
        </div>
        <div class="progress">
            <div class="bar shadow bees"></div>
        </div>
        <div class="progress">
            <div class="bar shadow food"></div>
        </div>
        <div class="progress">
            <div class="bar shadow clouds"></div>
        </div>
        <div class="progress">
            <div class="bar shadow stripes"></div>
        </div>
        <div class="progress">
            <div class="bar shadow crosses"></div>
        </div>
        <div class="progress">
            <div class="bar shadow jupiter"></div>
        </div>
        <div class="progress">
            <div class="bar shadow piano"></div>
        </div>
        <div class="progress">
            <div class="bar shadow dominos"></div>
            </ </body>

</html>
<script>
    const bars = document.querySelectorAll( '.bar' );
    const progress = document.querySelectorAll( '.progress' );

    bars.forEach( ( bar, index ) => {
        const randomWidth = Math.floor( ( Math.random() * 65 ) + 10 );
        bar.style.width = `${randomWidth}%`;

        progress[index].addEventListener( 'mouseover', () => {
            const randomTiming = Math.floor( ( Math.random() * 2 ) + 2 );
            console.log( randomTiming );
            bar.style.transitionDuration = `${randomTiming}s`;
            bar.style.width = '100%';
        } );
    } )
</script>